<template>
  <!--考核单位分组管理-->
  <page-list :pageOption="pageOption" />
</template>

<script setup>
  import PageList from '../../../components/pageList/index.vue';
  import { optionsListApi } from './unitGroup.api';
  import { render } from '/@//utils/common/renderUtils';

  const indexTypeOptions = [
    {
      label: '通用',
      value: '1',
      key: '1',
    },
    {
      label: '业绩',
      value: '2',
      key: '2',
    },
    {
      label: '组织',
      value: '3',
      key: '3',
    },
  ];
  const pageOption = {
    dataUrl: '/base/stType',
    method: 'get',
    searchForm: [
      {
        field: 'typeName',
        label: '单位分组名称',
        component: 'Input',
        colProps: { span: 8 },
      },
      {
        field: 'stypeCode',
        label: '单位分组编码',
        component: 'Input',
        colProps: { span: 8 },
      },
    ],
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        width: 80,
        ifShow: false,
      },
      {
        title: '考核单位分组名称',
        dataIndex: 'typeName',
        width: 160,
        align: 'center',
      },
      {
        title: '考核单位分组编码',
        dataIndex: 'stypeCode',
        width: 150,
        align: 'center',
        dynamicDisabled: ({ values }) => {
          return !!values.id;
        },
      },
      {
        title: '考核周期类型',
        dataIndex: 'periodType',
        align: 'center',
        width: 100,
        ifShow: false,
        customRender: ({ text }) => {
          return render.renderDict(text, 'epm_period_type');
        },
      },
      {
        title: '排序',
        dataIndex: 'displayOrder',
        align: 'center',
        width: 90,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
        width: 150,
      },
    ],
    //弹窗附带表格 多个时会显示tab页签
    modalTableCreatable: true, //弹窗表格是否可新增和删除
    modalTableKeys: ['perDetail', 'indexDetail', 'checkDetail'], //弹窗附带表格数据对象名称集合,
    modalTables: [
      {
        title: '人员类型',
        //表头
        columns: [
          {
            title: 'id',
            dataIndex: 'id',
            editRow: true,
            width: 80,
            ifShow: false,
          },
          {
            title: '人员类型',
            dataIndex: 'infoName',
            editRow: true,
            editComponent: 'ApiSelect',
            editComponentProps: {
              api: optionsListApi,
              resultField: 'person',
              labelField: 'infoName',
              valueField: 'infoId',
            },
            width: 200,
            align: 'center',
          },
          {
            title: '备注',
            dataIndex: 'remark',
            editRow: true,
            align: 'center',
            width: 200,
          },
        ],
      },
      {
        title: '指标模板',
        //表头
        columns: [
          {
            title: 'id',
            dataIndex: 'id',
            editRow: true,
            width: 80,
            ifShow: false,
          },
          {
            title: '模板名称',
            dataIndex: 'infoName',
            editRow: true,
            editComponent: 'ApiSelect',
            editComponentProps: {
              api: optionsListApi,
              resultField: 'idx',
              labelField: 'infoName',
              valueField: 'infoId',
            },
            width: 200,
            align: 'center',
          },
          {
            title: '考核类型',
            dataIndex: 'sourceSet',
            editRow: true,
            editComponent: 'Select',
            editComponentProps: {
              options: indexTypeOptions,
            },
            width: 200,
            align: 'center',
          },
          {
            title: '排序',
            editRow: true,
            dataIndex: 'displayOrder',
            align: 'center',
            width: 200,
          },
          {
            title: '备注',
            dataIndex: 'remark',
            editRow: true,
            align: 'center',
            width: 200,
          },
        ],
      },
      {
        title: '业绩考核方案',
        //表头
        columns: [
          {
            title: 'id',
            dataIndex: 'id',
            editRow: true,
            width: 80,
            ifShow: false,
          },
          {
            title: '方案名称',
            dataIndex: 'infoName',
            editRow: true,
            editComponent: 'ApiSelect',
            editComponentProps: {
              api: optionsListApi,
              resultField: 'ck',
              labelField: 'infoName',
              valueField: 'infoId',
            },
            width: 200,
            align: 'center',
          },
          {
            title: '排序',
            editRow: true,
            dataIndex: 'displayOrder',
            align: 'center',
            width: 200,
          },
          {
            title: '备注',
            dataIndex: 'remark',
            editRow: true,
            align: 'center',
            width: 200,
          },
        ],
      },
    ],
    //新增编辑弹窗表单
    modalForm: [
      {
        field: 'id',
        label: 'id',
        component: 'Input',
        show: false,
      },
      {
        field: 'typeName',
        label: '分组名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'stypeCode',
        label: '分组编码',
        component: 'Input',
        required: true,
      },
      {
        field: 'periodType',
        label: '考核周期类型',
        component: 'ZDictSelectTag',
        ifShow: false,
        componentProps: {
          dictCode: 'epm_period_type',
          mode: 'multiple',
        },
      },
      {
        field: 'remark',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 5,
        },
        dynamicRules: () => {
          return [
            {
              validator: (_, value) => {
                if (null != value && value.length && value.length > 500) {
                  return Promise.reject('备注字数不能超过500');
                }
                return Promise.resolve();
              },
            },
          ];
        },
      },
      {
        field: 'displayOrder',
        label: '排序',
        component: 'InputNumber',
      },
    ],
  };
</script>

<style scoped></style>
